const default_option = {
    icon_size: 40,
    icon_padding: 5,
    scale: 1.5
}

function MacDock(dockdom, items, option = {}) {
    // this.option = option;
    for (let k in default_option) this[k] = default_option[k];
    for (let k in option) this[k] = option[k];
    this.dockdom = dockdom;
    this.items = items;
    this.scale -= 1;
    this.__init();

}

function randomColor() {
    return "hsl(" + 360 * Math.random() + ',' +
        (25 + 70 * Math.random()) + '%,' +
        (65 + 10 * Math.random()) + '%)'
}

function createBackgroundImg(title) {
    title = typeof title == "string"?title:title[0]
    let width = default_option.icon_size
    let height = default_option.icon_size
    let fontSize = default_option.icon_size*0.75
    let canvas = document.createElement("canvas");
    canvas.width = width;
    canvas.height = height;
    let ctx = canvas.getContext("2d");
    // ctx.fillStyle = "#FFF0"//randomColor()
    // ctx.fillRect(0, 0, width, height)
    let colorLeftTop = ctx.createLinearGradient(0, 0, width, height)
    let c1 = randomColor()
    let c2 = randomColor()
    colorLeftTop.addColorStop(0, c1)
    colorLeftTop.addColorStop(.75, c2)
    ctx.fillStyle = colorLeftTop
    ctx.fillRect(0, 0, width, height)

    ctx.font = fontSize + "px 微软雅黑"
    ctx.fillStyle = randomColor()
    let m = ctx.measureText(title.substring(0, 1))
    ctx.fillText(title.substring(0, 1), (width - m.width) / 2, (height *=0.75))
    return canvas.toDataURL("image/png")
}

MacDock.prototype = {
    __init: function () {
        this.coverdom = document.createElement("div");
        this.dockdom.appendChild(this.coverdom);
        this.coverdom.setAttribute("class", "cover")
        this.__add_items();
        this.coverdom.onmousemove = (e) => {
            this.__get_size(e.pageX)
        }
        this.coverdom.onmouseleave = () => {
            this.reset_size();
        }
        this.dockdom.style.width = this.items.length * (this.icon_size + this.icon_padding * 2) + "px";
        this.dockdom.style.height = (this.icon_padding * 2 + this.icon_size) + "px";
        this.center();
    },
    center: function (m) {
        let domW = this.dockdom.offsetWidth;
        // let screenW = window.innerWidth;
        this.dockdom.style.marginLeft = -(domW / 2) + "px";
        if(this.items.length==0){
            this.dockdom.style.border="0px"
        }
    },
    gussion: function (x) {
        return Math.exp(-Math.pow(x, 2) / 8)
    },
    __add_items: function () {
        let index = 0;
        let left = this.icon_padding;
        this.items.forEach(item => {
            const itemdom = document.createElement("div");
            this.coverdom.appendChild(itemdom);
            itemdom.style.backgroundImage = item.icon.length === 0 ? createBackgroundImg(item.title) : "url(" + item.icon + ")";
            itemdom.setAttribute("class", "item")
            const itemdomtitle = document.createElement("div");
            itemdom.appendChild(itemdomtitle);
            itemdomtitle.setAttribute("class", "title");
            itemdomtitle.innerText = (typeof item.title ==="string"?item.title:item.title[0]);
            itemdomtitle.style.marginLeft = -(itemdomtitle.offsetWidth / 2) + "px";
            item.index = index;
            item.position = itemdom.offsetLeft + this.dockdom.offsetLeft;
            index += 1;
            item.dom = itemdom;
            item.dom.style.left = left + "px";
            item.dom.style.bottom = this.icon_padding + "px";
            item.dom.style.width = this.icon_size + "px";
            item.dom.style.height = this.icon_size + "px";
            left += this.icon_size + this.icon_padding * 2;
        });
    },
    __get_size: function (m) {
        this.coverdom.style.height = (this.icon_size * (this.scale + 1) + this.icon_padding * 2) + "px";
        this.coverdom.style.marginTop = -this.icon_size * (this.scale) + "px";
        let left = this.icon_padding;
        this.items.forEach(item => {
            item.position = item.dom.offsetLeft + this.dockdom.offsetLeft + .5 * (this.icon_size + this.icon_padding * 2);
            let scale_computed = Math.floor(this.gussion((item.position - m) / (item.dom.offsetWidth + this.icon_padding * 2)) * 100) / 100
            let size = (scale_computed * this.scale + 1) * this.icon_size;
            item.dom.style.width = size + "px";
            item.dom.style.height = size + "px";

            item.dom.style.left = left + "px";
            left += size + this.icon_padding * 2;
        });
        this.dockdom.style.width = left + "px";
        this.center(m);
    },
    reset_size: function () {
        let left = this.icon_padding;
        for (let i = 0; i < this.items.length; i++) {
            let item = this.items[i];
            if (!Object.hasOwn(item, "dom")) {
                const itemdom = document.createElement("div");
                this.coverdom.appendChild(itemdom);
                itemdom.style.backgroundImage = item.icon.length === 0 ? "url(" + createBackgroundImg(item.title) + ")" : "url(" + item.icon + ")";
                itemdom.setAttribute("class", "item")
                const itemdomtitle = document.createElement("div");
                itemdom.appendChild(itemdomtitle);
                itemdomtitle.setAttribute("class", "title");
                itemdomtitle.innerText = (typeof item.title ==="string"?item.title:item.title[0]);
                itemdomtitle.style.marginLeft = -(itemdomtitle.offsetWidth / 2) + "px";
                item.index = i + 1;
                item.position = itemdom.offsetLeft + this.dockdom.offsetLeft;
                item.dom = itemdom;
                item.dom.style.left = left +"px";
                item.dom.style.bottom = this.icon_padding + "px";
                item.dom.style.width = this.icon_size + "px";
                item.dom.style.height = this.icon_size + "px";
                left += this.icon_size + this.icon_padding * 2;
                itemdom.addEventListener("click",function(e){
                    new Function(item.click).call(itemdom)
                })
            } else {
                let size = this.icon_size;
                item.dom.style.width = size + "px";
                item.dom.style.height = size + "px";
                item.dom.style.left = left + "px";
                left += this.icon_size + this.icon_padding * 2;
            }
        }
        this.dockdom.style.width = this.items.length * (this.icon_size + this.icon_padding * 2) + "px";
        this.coverdom.style.height = "100%";
        this.coverdom.style.marginTop = "0px";
        this.center();
    },
    remove: function (i) {
        this.coverdom.childNodes[i].remove()
        macDock.items.splice(i, 1);
        macDock.reset_size()
    }
}